<style lang="scss" scoped>
.timeline-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  overflow-y: auto;
  padding-top: 64px; // 为顶部header留出空间
}

.timeline-container {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 20px;
  background-color: #fff;
}

.timeline-year {
  font-size: 2rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 40px;
  position: relative;
  user-select: none;

  &::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 36px;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(135deg, #1976d2, #42a5f5);
    border-radius: 2px;
  }
}

.timeline-card {
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-2px);
  }
}

.timeline-date {
  font-size: 0.9rem;
  color: #757575;
  margin-bottom: 8px;
  font-weight: 500;
}

.timeline-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.3s ease;

  &:hover {
    color: #1976d2;
  }
}

.timeline-category {
  font-size: 0.85rem;
  color: #9e9e9e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.timeline-category-tag {
  display: inline-block;
  padding: 4px 8px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #666;
  margin-right: 8px;
  margin-bottom: 4px;
}

// 自定义 Vuetify Timeline 样式
:deep(.v-timeline) {
  .v-timeline-item__body {
    margin-bottom: 24px;
  }

  .v-timeline-item__opposite {
    display: none; // 隐藏相对侧内容
  }

  .v-timeline-item__dot {
    background: #1976d2 !important;
    border: 3px solid #fff !important;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3) !important;
  }

  .v-timeline-item__line {
    background: #e0e0e0 !important;
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .timeline-page {
    padding-top: 56px; // 移动端header高度
  }
}

@media (max-width: 768px) {
  .timeline-page {
    padding-top: 56px;
  }

  .timeline-container {
    padding: 20px 15px;
  }

  .timeline-year {
    font-size: 1.5rem;
  }

  .timeline-title {
    font-size: 1.1rem;
  }
}
</style>

<template>
  <div class="timeline-page">
    <div class="timeline-container my-4 elevation-2">
      <!-- 年份标题 -->
      <div class="timeline-year">2025</div>

      <!-- Vuetify 时间线组件 -->
      <v-timeline side="end" line-color="#ccc" density="comfortable">
        <v-timeline-item
          v-for="(item, index) in timelineData"
          :key="index"
          :dot-color="getCategoryColor(item.categories[0])"
          size="small"
        >
          <template v-slot:icon>
            <v-icon size="small" color="white">mdi-circle</v-icon>
          </template>

          <v-card class="timeline-card" elevation="2" @click="handleItemClick(item)">
            <v-card-text class="pa-4">
              <div class="timeline-date">{{ item.date }}</div>
              <div class="timeline-title">
                {{ item.title }}
              </div>
              <div class="timeline-category">
                <span
                  v-for="category in item.categories"
                  :key="category"
                  class="timeline-category-tag"
                >
                  {{ category }}
                </span>
              </div>
            </v-card-text>
          </v-card>
        </v-timeline-item>
      </v-timeline>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 时间线数据类型
interface TimelineItem {
  date: string
  title: string
  categories: string[]
  id?: string
  url?: string
}

// 时间线数据
const timelineData = ref<TimelineItem[]>([
  {
    date: '2025-09-02',
    title: '卸载百度网盘智能看图',
    categories: ['TECH', 'WINDOWS'],
    id: '1',
    url: '/blog/1'
  },
  {
    date: '2025-09-01',
    title: 'CDN 方式引入 Monaco Editor',
    categories: ['TECH', 'FRONTEND'],
    id: '2',
    url: '/blog/2'
  },
  {
    date: '2025-09-01',
    title: '在线工具-富文本转 Markdown',
    categories: ['TOOL'],
    id: '3',
    url: '/blog/3'
  },
  {
    date: '2025-08-25',
    title: '2025年了,安卓平板上什么第三方九键输入法最好用?',
    categories: ['TECH', 'ANDROID'],
    id: '4',
    url: '/blog/4'
  },
  {
    date: '2025-08-25',
    title: '鸿蒙 PC 编译运行 Electron 应用',
    categories: ['TECH', 'HARMONY'],
    id: '5',
    url: '/blog/5'
  },
  {
    date: '2025-08-06',
    title: 'bat 脚本打印输出彩色文字',
    categories: ['TECH', 'WINDOWS'],
    id: '6',
    url: '/blog/6'
  },
  {
    date: '2025-07-11',
    title: 'Android 强制锁定屏幕旋转方向',
    categories: ['TECH', 'ANDROID'],
    id: '7',
    url: '/blog/7'
  },
  {
    date: '2025-06-27',
    title: '腾讯代码托管服务 Coding 将停服',
    categories: ['DIARY'],
    id: '8',
    url: '/blog/8'
  },
  {
    date: '2025-05-08',
    title: '微信快速找出自己创建的群聊',
    categories: ['DIARY'],
    id: '9',
    url: '/blog/9'
  },
  {
    date: '2025-04-29',
    title: '将扣子空间生成的jsx格式网页部署到自己的服务器',
    categories: ['TECH', 'FRONTEND'],
    id: '10',
    url: '/blog/10'
  },
  {
    date: '2025-04-24',
    title: '扣子空间邀请码',
    categories: ['DIARY'],
    id: '11',
    url: '/blog/11'
  },
  {
    date: '2025-03-19',
    title: 'Midscene.js: AI驱动的自动化测试工具',
    categories: ['TECH', 'TOOL'],
    id: '12',
    url: '/blog/12'
  }
])

// 根据分类获取颜色
const getCategoryColor = (category: string) => {
  const colorMap: { [key: string]: string } = {
    TECH: '#1976d2',
    TOOL: '#4caf50',
    DIARY: '#ff9800',
    WINDOWS: '#2196f3',
    FRONTEND: '#9c27b0',
    ANDROID: '#4caf50',
    HARMONY: '#ff5722'
  }
  return colorMap[category] || '#1976d2'
}

// 处理项目点击
const handleItemClick = (item: TimelineItem) => {
  if (item.url) {
    // 这里可以添加路由跳转逻辑
    console.log('点击了项目:', item.title)
    // 例如：router.push(item.url)
  }
}
</script>
